<template>
	<view class="order">
		<!-- tab 栏 -->

		<view class="tabBox">
			<u-scroll-list style="width: 100% !important;" :indicator="false">
				<view class="" style="display: flex;">
					<view class="navItem" v-for="(i,index) in tabList" :key="index"
						:style="{color:(tabCurrent == i.index?'#47578E':'#909090')}" @tap.stop="tabChange(i.index)">
						<view class="">
							{{i.name}}
						</view>
						<view class="leftIcon" :style="{background:(tabCurrent == i.index?'#47578E':'#fff')}"></view>

					</view>
				</view>
			</u-scroll-list>
		</view>

		<transition name="fade" mode="out-in">
			<!-- 汇咨询列表 -->
			<view class="listBox" v-if="tabCurrent == 1||tabCurrent == 8">
				<consultBody :home='false' :list="list" :metType='0' :url="'/pages/home/festivalDetail'" :type="tabCurrent"/>
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			</view>
			<view class="listBox" v-if="tabCurrent == 9">
				<consultBody :home='false' :list="list" :metType='0' :url="'/pages/home/watchDetails'" :type="tabCurrent"/>
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			</view>
			<!-- 享活动/读好书列表 -->
			<view class="listBox" v-if="tabCurrent == 4 || tabCurrent == 5 || tabCurrent == 3 || tabCurrent == 7">
				<view class="list" v-for="(item,index) in list" :key="index">
					<image :src="$imageOss(item.image)" mode="widthFix"
						style="width: 440rpx;border-radius: 8rpx;height: 220rpx;"></image>
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<u-text :text="item.title" lines="1" line-height="48rpx" color="#000" size="28rpx" />
						</view>
						<view class="time" v-if="tabCurrent == 4">开始时间：{{item.start_time||''}}</view>
						<view class="time" v-if="tabCurrent == 4">结束时间：{{item.end_time||''}}</view>
						<view class="time" v-if="tabCurrent == 3">产品分类：{{item.start_time||''}}</view>
						<view class="time" v-if="tabCurrent == 3">发布时间：{{item.createtime||''}}</view>
						<view class="time" v-if="tabCurrent == 7">{{item.createtime||''}}</view>
						<view class="time" v-if="tabCurrent == 7">申报地区：{{item.address||''}}</view>
						<view class="time" v-if="tabCurrent == 5">{{item.author||''}}</view>
					</view>
				</view>
				<!-- 提示栏 -->
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			</view>

			<!-- 列表 -->
			<view class="listBox" v-if="tabCurrent == 6"
				style="display:flex;flex-wrap:wrap;justify-content: flex-start">
				<view class="round" v-for="(item,index) in list" :key="index">
					<view class="image" style="width: 100%;">
						<image src="@/static/my/act.png" mode="widthFix" style="width: 430rpx;border-radius: 8rpx;">
						</image>
					</view>
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<view class="name">{{item.name||''}}</view>
						</view>
						<view class="time">地址：{{item.address||''}}</view>
					</view>
				</view>
				<!-- 提示栏 -->
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			</view>

			<view class="listBox" v-if="tabCurrent == 2">
				<view class="train" v-for="(item,index) in list" :key="index">
					<view class="list_t flex-r-b-c">
						<view class="list_t_r">
							<view class="list_t_r_t flex-r-b-c">
								<u-text :text="item.titile" lines="2" line-height="48rpx" color="#000" size="32rpx" />
							</view>
							<view class="time">地址：{{item.address||''}}</view>
							<view class="time">日期：{{item.train_start_time||''}}-{{item.train_end_time||''}}</view>
						</view>
					</view>
				</view>
				<!-- 提示栏 -->
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			</view>
		</transition>
	</view>
</template>

<script>
	import consultBody from '@/pages/index/consultBody.vue';
	import {
		mycollect
	} from "@/request/myApi.js";
	export default {
		components: {
			consultBody
		},
		data() {
			return {
				tabCurrent: 1,
				tabList: [{
					name: '汇资讯',
					index: 1
				}, {
					name: '学才艺',
					index: 2
				}, {
					name: '赶大集',
					index: 3
				}, {
					name: '享活动',
					index: 4
				}, {
					name: '读好书',
					index: 5
				}, {
					name: '订场馆',
					index: 6
				}, {
					name: '品非遗',
					index: 7
				}, {
					name: '游林芝',
					index: 8
				},{
					name: '赏精品',
					index: 9
				}
				],
				page: 1,
				list: [],
				isText: '',
				last_page: 1,
			};
		},

		onLoad() {

		},
		onShow() {
			this.list = []
			this.page = 1
			this.isText = ''
			this.myList()
		},
		methods: {
			// 
			Jump(type) {
				uni.navigateTo({
					url: '/pages/home/festivalDetail?type=' + type
				})
			},
			// tab 切换
			tabChange(e) {
				this.tabCurrent = e
				this.list = []
				this.page = 1
				this.isText = ''
				this.myList()
			},
			// 获取活动列表
			myList() {
				let that = this
				mycollect({
					table: this.tabCurrent,
					page: this.page,
					limit: 10
				}).then((res) => {
					res.data.count == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.list)
					that.last_page = Math.ceil(res.data.count / res.data.list.length)
					console.log(that.list, 'that.list')
				});
			},

			// 跳转到详情页面
			goDetails(el) {
				let res = {
					order_number: el.order_number,
					goods_img: el.goods_img,
					goods_name: el.goods_name
				}
				uni.navigateTo({
					url: '/pages/order/details/details?res=' + JSON.stringify(res)
				})
			}
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.myList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.u-tab-bar {
		display: none !important;
	}

	.chooseCup {
		margin-right: 8rpx !important;

		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}

	.order {
		width: 100vw;

		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 1s
		}

		.fade-enter,
		.fade-leave-active {
			opacity: 0
		}

		.tabBox {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			width: 100%;
			padding: 10rpx 20rpx 0;
			box-sizing: border-box;
			text-align: left;
			font-size: 30rpx;

			/deep/.u-scroll-list {
				width: 100%;
				padding-bottom: 0;
			}

			.leftIcon {
				width: 100rpx;
				height: 3rpx;
				margin: 14rpx auto;
			}

			.navItem {
				width: 140rpx;
				text-align: center !important;
				overflow: hidden;
			}

		}

		.listBox {
			width: 96%;
			margin: 0rpx auto;

			.list {
				width: 100%;
				height: auto;
				height: 160rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-sizing: border-box;
				-moz-box-shadow: 0 0 10px #f2f2f2;
				-webkit-box-shadow: 0 0 10px #f2f2f2;
				box-shadow: 0 0 10px #f2f2f2;
				display: flex;

				.image {
					width: 100rpx;
				}

				.list_t_r {
					width: 170%;
					margin-left: 20rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;

					.list_t_r_t {
						font-size: 30rpx;
						font-weight: 400;

						.name {
							margin: 10rpx 0;
							font-weight: 500;
						}
					}

					.time {
						font-size: 27rpx;
						font-weight: 400;
						color: #979797;
						margin-bottom: 6rpx;
					}
				}
			}

			.round {
				width: 50%;
				height: auto;
				padding: 16rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-sizing: border-box;

				.image {
					image {
						width: 330rpx !important;
					}

				}

				.list_t_r {
					width: 100%;

					.list_t_r_t {
						font-size: 30rpx;
						font-weight: 400;

						.name {
							margin: 10rpx 0;
							font-weight: 500;
						}
					}

					.time {
						font-size: 27rpx;
						font-weight: 400;
						color: #979797;
						margin: 6rpx 0;
					}
				}
			}

			.train {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-sizing: border-box;
				-moz-box-shadow: 0 0 10px #f2f2f2;
				-webkit-box-shadow: 0 0 10px #f2f2f2;
				box-shadow: 0 0 10px #f2f2f2;

				.list_t {
					.list_t_r {
						width: 100%;

						.list_t_r_t {
							font-size: 32rpx;
							font-weight: 400;

							.name {
								margin: 10rpx 0;
								font-weight: 600;
							}
						}

						.time {
							font-size: 27rpx;
							font-weight: 400;
							color: #979797;
							margin: 6rpx 0;
						}
					}
				}
			}
		}
	}
</style>